import React, { Component, PureComponent, memo } from "react";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: ["1", "2", "3"],
    };
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.movies.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
        <Texts></Texts>
        <MemoHeader></MemoHeader>
        <button onClick={(e) => this.add()}>add</button>
      </div>
    );
  }
  add = () => {
    const app = [...this.state.movies];
    app.push("4");
    this.setState({
      movies: app,
    });
  };
}

/* 这个pureComponent这个东西将我的shouldWillUpdate的生命周期里面的事情全部干了一遍这样 */
class Texts extends PureComponent {
  render() {
    return (
      <div>
        <span>123</span>
      </div>
    );
  }
}

// 相当于用了pureComponent的函数组件一样的操作,很简单的东西,不想多说什么东西了..
const MemoHeader = memo(function Header() {
  return <h2>组件</h2>;
});
